import React from 'react';
import profile from '../../assets/css/user/profile.module.css'
import {Drawer, Toast} from "antd-mobile";

export default class ProfileComponent extends React.Component{
    constructor(){
        super();
        this.state={
            sHead:'',
            name:'',
            uid:localStorage.uid,
            open: false,
            sex:0,
            gender:localStorage['gender']
        }
    }
    goBack(){
        this.props.history.goBack()
    }
    componentWillMount() {
        if (localStorage.imgHead){
            this.setState({sHead:localStorage.imgHead})
        } else {
            this.setState({sHead:'/images/user/my/default-head.png'})
        }
    }
    uploadHead(){
        if (localStorage.isLogin === 'true') {
            let oHeadFile=this.refs['headFile'];
            if (oHeadFile.files[0]!==undefined){
                let formData=new FormData();
                formData.append('headfile',oHeadFile.files[0]);
                fetch("http://vueshop.glbuys.com/api/user/myinfo/formdatahead?token=1ec949a15fb709370f",{
                    method:'post',
                    body:formData
                }).then(res=>res.json())
                    .then(res=>{
                        if (res.code===200){
                            this.setState({sHead:'http://vueshop.glbuys.com/userfiles/head/'+res.data.msbox});
                        }
                    })
            }
        }
    }
    Btn(){
        if (this.state.uid!==''){
            const params=new URLSearchParams();
            params.append('nickname',this.state.name);
            params.append('uid',this.state.uid);
            params.append('gender',this.state.sex);
            fetch('http://vueshop.glbuys.com/api/user/myinfo/updateuser?token=1ec949a15fb709370f',{
                method:'POST',
                body:params
            }).then((res)=>res.json())
                .then(res=>{
                    console.log(res);
                    if (res.code===200){
                        localStorage['nickname']=this.state.name;
                        Toast.info(res.data, 1);
                        localStorage['imgHead']=this.state.sHead;
                        this.props.history.replace('/')
                    }else {
                        Toast.info(res.data, 1);
                    }
                })
        }
    }
    onOpenChange = () => {
        this.setState({ open: !this.state.open });
    };
    male(){
        this.setState({gender:'男'},()=>{
            localStorage['gender']=this.state.gender;
        });
        this.setState({sex:1});
        this.onOpenChange()
    }
    female(){
        this.setState({gender:'女'},()=>{
            localStorage['gender']=this.state.gender;
        });
        this.setState({sex:2});
        this.onOpenChange()
    }
    cancel(){
        this.onOpenChange()
    }

    render() {
        const sidebar = (
            <div className={profile.boxDrawer}>
                <p>请选择性别</p>
                <p onClick={this.male.bind(this)}>男</p>
                <p onClick={this.female.bind(this)}>女</p>
                <p onClick={this.cancel.bind(this)}>取消</p>
            </div>
        );
        return(
            <div className={profile.boxProfile}>
                <Drawer
                    className="my-drawer"
                    style={{ minHeight: document.documentElement.clientHeight }}
                    position="bottom"
                    enableDragHandle
                    sidebar={sidebar}
                    open={this.state.open}
                    onOpenChange={this.onOpenChange}
                >
                    <div className={profile.one}>
                        <img src={require("../../assets/images/home/goods/back.png")} onClick={this.goBack.bind(this)} alt=""/>
                        <span>个人资料</span>
                        <span onClick={this.Btn.bind(this)}>保存</span>
                    </div>
                    <div className={profile.boxDiv}>
                        <div>
                            <span>头像</span>
                            <img src={this.state.sHead} alt=''/>
                            <input type="file" onClick={this.uploadHead.bind(this)} className={profile.headFile} ref="headFile"/>
                        </div>
                        <div className={profile.boxConten}>
                            <span>昵称</span>
                            <p>
                                <input type='text' defaultValue={localStorage.nickname} onChange={(e)=>{
                                    this.setState({name:e.target.value})
                                }}/>
                                <img src={require('../../assets/images/common/right_arrow.png')} alt=''/>
                            </p>
                        </div>
                        <div className={profile.boxConten}>
                            <span>性别</span>
                            <p>
                                <input type='text' onClick={this.onOpenChange} value={this.state.gender} readOnly/>
                                <img src={require('../../assets/images/common/right_arrow.png')} alt=''/>
                            </p>
                        </div>
                    </div>
                </Drawer>
            </div>
        )
    }
}